<template>
  <div class="fileContainer">
    <div class="btnBox mb20">
      <Button type="primary" @click="handleAdd" icon="md-add" class="mr10">添加</Button>
    </div>
    <div class="tableBox">
      <Table ref="tbl" border :columns="columns" :data="tableData"></Table>
    </div>
    <div class="pageBox mt15 fjcfe">
      <Page
        class="page"
        :total="total"
        :page-size="pageSize"
        :current="current"
        show-sizer
        show-elevator
        show-total
        @on-change="pageChange"
        @on-page-size-change="sizeChange"
      />
    </div>
    <file-form :formData="formData" @handleCancel="handleCancel"></file-form>
  </div>
</template>

<script>
import FileForm from '_c/train/resource/fileForm'
export default {
  name: 'fileContainer',
  components: {
    FileForm
  },
  data () {
    return {
      formData: {
        showForm: false,
        type: 0,
        title: '',
        info: {}
      },
      columns: [
        { type: 'index', title: '序号', width: window.$config.columnWidth.ca, align: 'center' },
        {
          title: '文档名称',
          align: 'center',
          key: 'username'
        },
        {
          title: '培训类型',
          align: 'center',
          key: 'realName'
        },
        {
          title: '文档附件',
          align: 'center',
          key: 'realName'
        },
        {
          title: '创建时间',
          align: 'center',
          key: 'deptName'
        },
        {
          title: '操作',
          //   fixed: 'right',
          width: window.$config.columnWidth.cc,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h(
                'a',
                {
                  attr: {
                    href: 'javascript:void(0)'
                  },
                  class: 'mc',
                  on: {
                    click: e => {
                      this.formData = {
                        title: '编辑',
                        showForm: true,
                        type: 1,
                        info: params.row
                      }
                    }
                  }
                },
                '编辑'
              ),
              h(
                'span',
                {
                  style: {
                    margin: '0 8px',
                    color: '#e8eaec'
                  }
                },
                '|'
              ),
              h('Dropdown', {
                props: {
                  transfer: true
                },
                scopedSlots: {
                  default: props =>
                    h(
                      'a',
                      {
                        class: 'mc',
                        attr: {
                          href: 'javascript:void(0)'
                        }
                      },
                      ['更多', h('Icon', { props: { type: 'ios-arrow-down' } })]
                    ),
                  list: props =>
                    h('DropdownMenu', [
                      h(
                        'DropdownItem',
                        {
                          style: { textAlign: 'center' },
                          nativeOn: {
                            click: e => {
                              this.formData = {
                                title: '详情',
                                showForm: true,
                                type: 2,
                                info: params.row
                              }
                            }
                          }
                        },
                        '查看'
                      ),
                      h(
                        'DropdownItem',
                        {
                          style: { textAlign: 'center' },
                          nativeOn: {
                            click: e => {
                              this.$Modal.confirm({
                                title: '提示',
                                content: '<p>确定删除吗？</p>',
                                onOk: () => {
                                  this.delete(params.row.id)
                                },
                                onCancel: () => {}
                              })
                            }
                          }
                        },
                        '删除'
                      )
                    ])
                }
              })
            ])
          }
        }
      ],
      tableData: [],
      total: 0,
      pageSize: 10,
      current: 1
    }
  },
  created () {
    this.tableData = [
      {
        name: '入司培训',
        time: '2019-09-04',
        type: '入职',
        url: 'https://www.w3school.com.cn/i/movie.ogg',
        id: '1'
      },
      {
        name: '入司培训',
        time: '2019-09-04',
        type: '入职',
        url: 'https://www.w3school.com.cn/i/movie.ogg',
        id: '1'
      },
      {
        name: '入司培训',
        time: '2019-09-04',
        type: '入职',
        url: 'https://www.w3school.com.cn/i/movie.ogg',
        id: '1'
      },
      {
        name: '入司培训',
        time: '2019-09-04',
        type: '入职',
        url: 'https://www.w3school.com.cn/i/movie.ogg',
        id: '1'
      }
    ]
  },
  methods: {
    handleAdd () {
      this.formData = {
        showForm: true,
        type: 0,
        title: '添加',
        info: {}
      }
    },
    editVideo (item) {
      this.formData = {
        showForm: true,
        type: 1,
        title: '编辑',
        info: item
      }
    },
    removeVideo (item) {},
    // 关闭
    handleCancel () {
      this.formData.showForm = false
    },
    // 分页
    sizeChange (e) {
      this.pageSize = e
      this.query()
    },
    pageChange (e) {
      this.current = e
      this.query()
    }
  }
}
</script>

<style lang="less" scoped>
</style>
